<template>
  <template v-if="loginUrl" >
    <router-view @loginSuccess="getSelfUserInfo"></router-view>
  </template>
  <template v-else-if="fullscreen" >
    <router-view @loginSuccess="getSelfUserInfo"></router-view>
  </template>
  <div id="app" v-else>
    <el-container class="app-main-header">
      <el-aside>
        <div class="menu-box">
          <el-menu
            default-active="1-4-1"
            :router="true"
            class="el-menu-vertical"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse" 
          >
            <el-menu-item index="/">
              <el-icon :size="20" :color="color">
                <Edit /> </el-icon
              >控制台</el-menu-item
            >
            <el-sub-menu index="1">
              <template #title>系统管理</template>

              <el-menu-item index="/console/userList">
                <el-icon :size="20" :color="color">
                  <Share />
                </el-icon>
                <span>用户管理</span>
              </el-menu-item>
              <el-menu-item index="/console/userGroupList">
                <el-icon :size="20" :color="color">
                  <Open />
                </el-icon>
                <span>分组管理</span>
              </el-menu-item>

              <el-menu-item index="/console/authList">
                <el-icon :size="20" :color="color">
                  <Open />
                </el-icon>
                <span>权限管理</span>
              </el-menu-item>

              <el-menu-item index="/console/roleList">
                <el-icon :size="20" :color="color">
                  <Open />
                </el-icon>
                <span>角色列表</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <el-dropdown :hide-on-click="false" @command="userSettingDropdown">
            <span class="header-right-user-name">
              {{ userSelfInfo.userName }}
              <el-icon class="el-icon--right"></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="console"> 控制台</el-dropdown-item>
                <el-dropdown-item command="aboutDoc" divided
                  >关于</el-dropdown-item
                >
                <el-dropdown-item command="myInfo">我的资料</el-dropdown-item>
                <el-dropdown-item command="userSignOut"
                  >退出登录</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <el-main style="padding: 0">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { Share } from "@element-plus/icons-vue";
import { computed, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useGlobalData } from "@/store/global";
import consoleApi from "./common/api/console";

const color = ref("red");

const globalData = useGlobalData();
const fullscreen = computed(() => {
  return globalData.fullscreen 
});
const loginUrl = computed(()=>{
  return globalData.loginUrl
})

const isCollapse = ref(false);

let userSelfInfo = ref({});
let userAuth = ref({
  userManage: true,
});

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};

const $router = useRouter();

const userSettingDropdown = (command: any) => {
  if (command == "userSignOut") {
    console.log("userSignOut");
  } else if (command == "aboutDoc") {
    console.log("aboutDoc");
  } else if (command == "myInfo") {
    $router.push({ path: "/user/myInfo" });
  } else if (command == "console") {
    console.log("console");
  } else {
    console.log("error");
  }
};

const getSelfUserInfo = () => {
  consoleApi.selfInfoWithAuth()
    .then((json) => {
      let infoVo = json.data || {};
      userSelfInfo.value = infoVo.userInfo;
      userAuth.value = infoVo.userAuth || {};
    })
    .catch((e) => {
      console.log("获取用户信息失败", e);
    });
};
onMounted(() => {
  getSelfUserInfo();
});


</script>

<style scoped lang="scss">
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#app,
.el-container,
.el-menu {
  height: 100%;
}
.el-header {
  background-color: #1d4e89 !important;
}
.header-right-user-name {
  color: #fff;
  padding-right: 5px;
  text-align: center;
  line-height: 40px;
}
.el-menu-vertical {
  border-right: 0;
  background: #fafafa;
}
.el-menu-vertical .el-menu {
  background: #fafafa;
}
.el-header {
  background-color: #409eff;
  color: #333;
  line-height: 40px;
  text-align: right;
  height: 40px !important;
}
.el-aside{
    width: 20vw;
}
.menu-box {
  padding: 10px;
  height: 100%;
  box-sizing: border-box;
  background: #fafafa;

}
.menu-box .i-icon {
  line-height: 1;
  margin-right: 5px;
}
.el-aside {
  height: 100vh;
}
</style>
